<template>
  <div>
    <el-dialog title="设置角色" :visible="showRoleDialog" width="30%" @close="closeFn">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="item in roleList"
          :key="item.id"
          :label="item.id"
        >
          {{ item.title }}
        </el-checkbox>
      </el-checkbox-group>
      <template v-slot:footer>
        <el-row type="flex" justify="center">
          <el-button type="primary" size="small" @click="comfirmFn">确认</el-button>
          <el-button size="small" @click="closeFn">取消</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getRolesList } from '@/api/roles' // 获取角色列表
import { getSpecifEmployee, editorEmployee } from '@/api/employees' // 获取指定用户信息 //分配角色

export default {
  props: {
    showRoleDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checkList: [],
      roleList: [],
      employeesID: ''
    }
  },
  async created() {
    // 获取角色列表
    const res = await getRolesList()
    this.roleList = res.data
  },
  methods: {

    async getRoleIds(id) {
      // 保存员工id
      this.employeesID = id
      // 获取指定用户的信息
      const result = await getSpecifEmployee(id)
      // 实现角色回显
      const arr = result.data.roles
      const roleId = []
      arr.forEach(item => {
        roleId.push(item.id)
      })
      this.checkList = roleId
    },

    // ---确认按钮---
    async comfirmFn() {
      // 分配角色
      await editorEmployee({
        id: this.employeesID, // 员工id
        roles: this.checkList // 角色id集合
      })
      this.closeFn()
    },

    // 封装关闭弹窗函数
    closeFn() {
      this.checkList = [] // 优化-清空选中的角色
      this.$emit('update:showRoleDialog', false)
    }

  }
}
</script>

<style>

</style>
